<template>
    <!-- 订单产品列表 -->
    <view class="order-list">
        <view
            class="item"
            v-for="(item, index) in orderInfo"
            :key="index"
            @click="changeItem(item)"
        >
            <view class="item-img">
                <image
                    :src="item.gdimg ? item.gdimg : goodsImg"
                    mode="scaleToFill"
                ></image>
            </view>
            <view class="item-r">
                <view class="i-r-a">{{ item.gdname }}</view>
                <view class="i-r-b"
                    >{{ item.brand_txt }} {{ item.cattitle }}
                    {{ item.item_no }}</view
                >
                <view class="i-r-c" v-if="costSee"
                    >{{ "服务费: " }} {{  Number(Number(item.cost) / Number(item.number)).toFixed(2)  }}</view
                >
              
                <view class="i-r-d">
                    <view class="i-r-d-a"
                        ><text class="m-u"></text
                        ><text class="m-p-txt">{{
                            item.price   
                        }}</text>/次</view
                    >
                    <view class="i-r-d-b">x{{ item.number }}</view>
                </view>
            </view>
        </view>
        <billsItemInfo
            v-show="billsItemData && isBillsItem"
            :itemSpecls="billsItemData.spec_ls"
            @clickClose="clickClose"
            @iseditTeturnFun="iseditTeturnFun"
            :itemData="billsItemData"
            :nextstepForm="nextstepForm"
            ref="toggleItem"
        >
        </billsItemInfo>

        <!-- 新增/编辑物流 -->
        <el-dialog
            title="编辑退货"
            :visible.sync="iseditTeturn"
            width="730px"
            top="11vh"
            :modal="false"
            :close-on-click-modal="false"
            v-if="orderInfos"
        >
            <view class="teturn-cloud">
                <view class="info">
                    <view class="name">
                        <text>{{
                            orderInfos.customer_info &&
                            orderInfos.customer_info.name
                                ? " " + orderInfos.customer_info.name
                                : md == 3
                                ? "散客"
                                : "暂无供应商"
                        }}</text>
                    </view>
                    <view class="amount">
                        <text
                            >退货金额（￥{{ editreturnForm.amount_rt
                            }}{{
                                editreturnForm.money_q_rt > 0
                                    ? `+${editreturnForm.money_q_rt}`
                                    : ""
                            }}{{
                                `${editreturnForm.money_q_rt > 0 ? "券" : ""}`
                            }}）</text
                        >
                    </view>
                </view>
                <view class="info-form">
                    <el-form
                        ref="editreturnForm"
                        :model="editreturnForm"
                        label-width="68px"
                        :rules="rules"
                        :hide-required-asterisk="true"
                    >
                        <el-form-item label="退款金额" prop="amount_rt">
                            <el-input
                                v-model="editreturnForm.amount_rt"
                                placeholder="请输入退款金额"
                                class="w-300"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="消费券"
                            prop="money_q_rt"
                            v-if="orderInfos.money_q > 0"
                        >
                            <el-input
                                v-model="editreturnForm.money_q_rt"
                                placeholder="请输入消费券金额"
                                class="w-300"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="退款方式" prop="paycode">
                            <el-select
                                v-model="editreturnForm.paycode"
                                placeholder="请选择退款方式"
                                class="w-300"
                            >
                                <el-option
                                    v-for="item in orderInfos.payls_rt"
                                    :key="item.paycode"
                                    :label="item.title"
                                    :value="item.paycode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="退货门店">
                            <el-input
                                v-model="editreturnForm.thmd"
                                disabled
                                class="w-300"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="业务时间">
                            <el-date-picker
                                v-model="editreturnForm.atime_txt"
                                type="datetime"
                                placeholder="选择业务时间"
                                class="w-300"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                            >
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="经手人">
                            <el-select
                                v-model="editreturnForm.uid_cp"
                                placeholder="请选择经手人"
                                class="w-300"
                            >
                                <el-option
                                    v-for="item in optionsuidcp"
                                    :key="item.uid"
                                    :label="item.name"
                                    :value="item.uid"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 8 }"
                                v-model="editreturnForm.txt"
                                placeholder="输入备注"
                                class="w-300"
                                maxlength="2000"
                                show-word-limit
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </view>
            </view>
            <text slot="footer" class="dialog-footer">
                <el-button @click="iseditTeturn = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="editTeturnFun"
                    :loading="is_butloa"
                    >确 定</el-button
                >
            </text></el-dialog
        >
    </view>
</template>

<script>
import billsItemInfo from "./billsItemInfo.vue";
import staticConst from "../../js/const/StaticConst.js";
import accessCtrl from "../../js/limit/AccessCtrl.js";
import util from "../../js/util/Util.js";
import https from "../../js/https/Https.js";
import eventCtrl from "../../js/event/EventCtrl.js";

export default {
    props: ["md", "orderInfo", "orderInfos"],
    components: { billsItemInfo },
    data() {
        return {
            goodsImg: staticConst.GOOD_IMG,
            isBillsItem: false,
            billsItemData: [],
            costSee: true,
            iseditTeturn: false,
            is_butloa: false,
            optionsuidcp: [],
            editreturnForm: {},
            nextstepForm: [],
            rules: {
                amount_rt: [
                    { required: true, message: "请输入价格", trigger: "blur" },
                    {
                        pattern: /^\d+(.\d{1,2})?$/,
                        message: "请输入价格",
                        trigger: "blur",
                    },
                ],
                money_q_rt: [
                    {
                        required: true,
                        message: "请输入消费券金额",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\d+(.\d{1,2})?$/,
                        message: "请输入价格",
                        trigger: "blur",
                    },
                ],
                paycode: [
                    {
                        required: true,
                        message: "请选择退款方式",
                        trigger: "change",
                    },
                ],
            },
        };
    },

    async created() {
        this.costSee = await accessCtrl.getGdsCostSeeLimit();
    },

    methods: {
        initdate() {
            return Math.round(new Date().getTime()).toString();
        },
        /*****经手人列表*****/
        async loadUcpList() {
            const _this = this;
            https.loadUcpList(back);
            function back(data) {
                if (!data) return;
                _this.optionsuidcp = data || [];
                _this.optionsuidcp.map((v) => {
                    if (_this.orderInfos.uname_lock === v.name) {
                        _this.editreturnForm.uid_cp = v.uid;
                    }
                });
            }
        },
        // 打开编辑退货弹框
        iseditTeturnFun(data) {
            this.editreturnForm = {
                txt: "",
                uid_cp: "",
                paycode: "",
                money_q_rt:
                    this.orderInfos.money_q > 0 ? this.orderInfos.money_q : 0,
                amount_rt: data,
                type: this.orderInfos.type,
                thmd: this.orderInfos.shop,
                atime_txt: util.getTime("yyyy-MM-dd HH:mm"),
                odid: this.billsItemData.spec_ls[0].odid,
                gdid: this.billsItemData.gdid,
                sku_ls: [],
            };
            this.billsItemData.spec_ls.map((v, i) => {
                this.editreturnForm.sku_ls.push({
                    number_rt: this.nextstepForm[i].shuliang,//获取数量
                    price_rt: this.nextstepForm[i].jiage,//获取价格
                    sku_title: v.spec_title,
                    specid: v.specid,
                    unitid: v.unitid,
                });
            });
            if (this.optionsuidcp.length == 0) {
                this.loadUcpList();
            } else {
                this.optionsuidcp.map((v) => {
                    if (this.orderInfos.uname_lock === v.name) {
                        this.editreturnForm.uid_cp = v.uid;
                    }
                });
            }
            this.initdate();
            this.iseditTeturn = true;
        },
        // 提交编辑退货
        editTeturnFun() {
            this.$refs["editreturnForm"].validate((valid) => {
                if (valid) {
                    const _this = this;
                    const data = _this.editreturnForm;
                    _this.is_butloa = true;
                    https.orderReturnGd(data, back, true);
                    function back(res) {
                        if (res != 1) return;
                        _this.$msg({ title: "提交成功" });
                        _this.iseditTeturn = false;
                        _this.isBillsItem = false;
                        _this.is_butloa = false;
                        _this.$emit("updateFun", _this.orderInfos);
                        _this.$refs.toggleItem.is_return = false;
                    }
                } else {
                    return false;
                }
            });
        },
        /*** 点击打开该数据的单条单据详情 ***/
        changeItem(item) {
            this.nextstepForm = [];
            this.billsItemData = item;
            this.billsItemData.spec_ls.map((v) => {
                this.nextstepForm.push({
                    shuliang: v.number,
                    jiage: v.price,
                });
            });
            this.isBillsItem = true;
            this.$refs.toggleItem.toggleBillsStateMask("show");
            console.log("点击了销售单据的item   打开单据详情", item);
        },

        /*** 点击单据详情弹框关闭按钮 ***/
        clickClose() {
            this.isBillsItem = false;
            this.$refs.toggleItem.toggleBillsStateMask();
        },
    },
};
</script>
<style lang="scss" scoped>
.teturn-cloud {
    min-height: 550px;
    .info {
        .name {
            font-weight: bold;
            font-size: 16px;
        }
        .amount {
        }
    }
    .info-form {
        margin-top: 30px;
    }
    .w-300 {
        width: 300px;
    }
}
</style>
<style lang="scss">
.order-list {
    .item:hover {
        background: #f8f8f8; //rgba(200,200,200,.3);
    }
    .item {
        background: #fff;
        display: flex;
        padding: 20px;
        border-bottom: 1px solid #ececec;
        cursor: pointer;
        .item-img {
            width: 95px;
            height: 95px;
            border-radius: 4px;
            overflow: hidden;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .item-r {
            flex: 1;
            padding-left: 10px;
            view {
                font-size: 15px;
                line-height: 20px;
                color: #999;
            }
            .i-r-a {
                color: #333;
                line-height: 30px;
                font-size: 17px;
            }

            .i-r-c {
                font-size: 14px;
            }
            .i-r-d {
                display: flex;
                align-items: center;
                justify-content: space-between;
                .m-u {
                    font-size: 8px;
                    color: red;
                }
                .m-p-txt {
                    color: red;
                    font-size: 20px;
                }
            }
        }
    }
}
</style>
